ion-icon { display: block; }



ion-icon {
  pointer-events: none;
  color: hsl(0, 0%, 100%);
}

input,
textarea { width: 100%; }

address { font-style: normal; }


:focus-visible { outline-offset: 4px; }

::-webkit-scrollbar { width: 15px; }

::-webkit-scrollbar-track { background-color: hsl(0, 0%, 95%); }

::-webkit-scrollbar-thumb { background-color: hsl(0, 0%, 80%); }

::-webkit-scrollbar-thumb:hover { background-color: hsl(0, 0%, 70%); }
.container { padding-inline: 20px; }

.btn {
  color:hsl(0, 0%, 100%);
  font-family: 'Barlow', sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  max-width: max-content;
  padding: var(--padding, 10px 40px);
  border-radius: 50px;
  transition: 0.25s ease;
}

.btn-primary.blue { background-color: hsl(230, 80%, 39%); }

.btn-primary.blue:is(:hover, :focus) { background-color: hsl(7, 96%, 61%); }

.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.abs-img,
.abs-icon { display: none; }

.about { padding-block-start: 120px; }

.about-banner {
  background-color: #fff;
  border-radius:  10px;
  margin-block-end: 30px;
}

.about-banner > .img-cover { border-radius: inherit; }

.about :is(.section-title, .section-subtitle, .section-text) { text-align: left; }

.about :is(.section-title, .section-text) { margin-block-end: 30px; }
.portfolio .section-title { margin-block-end: 18px; }

.portfolio .section-text { margin-block-end: 80px; }



  .elem {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: hsl(0, 0%, 100%);
    border-radius: 10px;
    padding: 20px;
  }

  .elem-1 {
    top: 20px;
    left: -130px;
    
  }

  .elem-1 .elem-title { color:  hsl(196, 84%, 63%); }

  .elem-2 {
    bottom: 30px;
    right: -80px;
  }

  .elem-2 .elem-title { color: hsl(353, 83%, 65%); }

  .elem-title {
    font-size: 4.5rem;
    line-height: 1.1;
  }

  .elem-text {
    max-width: 10ch;
    color: hsl(0, 0%, 0%);
    font-weight: 700;
    line-height: 1.1;
  }

  .elem-3 {
    top: -40px;
    right: -30px;
  }

  .elem-3 ion-icon {
    color: hsl(50, 100%, 64%);
    font-size: 6rem;
  }


  @keyframes rotate360 {
    0% { transform: rotate(0); }
    100% { transform: rotate(1turn); }
  }
 .about { padding-block: 180px; }

  .about .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
  }

  .about-banner {
    position: relative;
    margin-block-end: 0;
  }

  .abs-img,
  .abs-icon {
    display: block;
    position: absolute;
  }

  .abs-img {
    width: 250px;
    height: 250px;
    object-fit: cover;
    border-radius: inherit;
    bottom: -150px;
    left: -100px;
  }

  .abs-icon {
    font-size: 5rem;
    padding: 20px;
    border-radius: inherit;
  }

  .abs-icon-1 {
    top: 50px;
    left: -120px;
    background-color: hsl(222, 88%, 55%);
  }

  .abs-icon-2 {
    top: -40px;
    right: -40px;
    background-color: hsl(50, 100%, 54%);
  }

  .abs-icon-3 {
    bottom: -40px;
    left: 250px;
    background-color: hsl(2, 85%, 35%);
  }